import React, { PureComponent } from 'react'

class HelloWorld extends PureComponent {
  constructor() {
    super()
    this.state = {
      message: 'hello world',
    }
  }

  render() {
    const { message } = this.state

    return (
      <div>
        <h2>内容：{message}</h2>
        <button onClick={(e) => this.changeText()}>修改文本</button>
      </div>
    )
  }

  changeText() {
    this.setState({
      message: '123',
    })
  }
}

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h1>App Page</h1>
        <HelloWorld />
        <HelloWorld2 />
      </div>
    )
  }
}

function HelloWorld2() {
  // 函数组件存在的最大缺陷
  // 1.组件不会被重新渲染: 修改message之后，组件知道自己重新进行渲染？
  // 2.如果页面重新渲染： 函数会被重新执行，第二次重新执行时，会重新给message赋值为hello world
  // 3.类似于生命周期的回调函数，也是没有的
  let message = 'hello world2'
  return (
    <div>
      <h2>内容2： {message}</h2>
      <button onClick={(e) => changeText()}>修改文本</button>
    </div>
  )

  function changeText() {
    message = 'abde'
  }
}

export default App
